<template>
  <div class="content">
    <brand brand1="商品管理" brand2="商品分类"></brand>
    <el-card class="bottom10">
      <el-row class="flex-hs">
        <el-col :span="24">
          <div class="flex-hs">
            <el-button type="success" @click="addItem()">添加分类（一级）</el-button>
            <el-button type="danger" :disabled="multipleSelection.length === 0" @click="deleteItem(1)">删除</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row class="flex-hs">
        <!-- default-expand-all -->
        <el-table :data="tableData" border  style="width: 100%;margin:20px 0" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @selection-change="handleSelectionChange">
          <el-table-column type="selection" label="" width="50" />
          <el-table-column prop="name" label="分类名称" />
          <el-table-column prop="id" label="ID" width="150" />
          <el-table-column prop="" label="分类级别" width="100">
          <template slot-scope="scope">
            <el-tag :type="{1:'success',2:'danger'}[scope.row.level]">{{{1:'一级分类',2:'二级分类'}[scope.row.level]}}</el-tag>
          </template>
          </el-table-column>
          <el-table-column  label="商品数量">
            <template slot-scope="scope">
              {{scope.row.num1||scope.row.num2||0}}
            </template>
           </el-table-column>
          <el-table-column prop="description" label="分类描述" />
          <el-table-column prop="img" label="分类缩略图">
            <template slot-scope="scope">
              <el-image style="width: 50px;height:50px" :preview-src-list="[$http.staticURL + scope.row.img]" :src="$http.staticURL + scope.row.img" fit="fill" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="60">
            <template slot-scope="scope">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  <i class="el-icon-more-outline" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="whatIclick('update', scope.row)">修改</el-dropdown-item>
                  <el-dropdown-item :command="whatIclick('delete', scope.row)">删除</el-dropdown-item>
                  <el-dropdown-item :command="whatIclick('addNext', scope.row)" v-if="scope.row.level<2">新增下级分类</el-dropdown-item>
                  <!-- <el-dropdown-item :command="whatIclick('delete', scope.row)">查看下级</el-dropdown-item> -->
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- <el-row class="flex-he">
        <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-row> -->
    </el-card>
    <add-or-upload v-if="openAddOrUpload" ref="addOrUpload" @save="search" />
  </div>
</template>

<script>
import addOrUpload from './addORupload'
export default {
  components: {
    addOrUpload
  },

  data() {
    return {
      activeNames: ['1'],
      currentPage: 1,
      pageSize: 20,
      total: 100,
      form: {
        keyword: ''
      },
      openAddOrUpload: false,
      multipleSelection: [],
      tableData: [],
      GYSoptions: []
    }
  },
  computed: {
    queryData() {
      return {
        // count: this.pageSize,
        // page: this.currentPage
      }
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    search() {
      this.$http.httpPost('/cate/cateList', this.queryData).then(res=>{
        if (res.data.code == 0) {
          this.total = res.data.data.total
          let arr = res.data.data.data
          this.tableData= this.dataDoJson(arr,0,1) 
        }
      })
    },
    // 递归处理数据
    dataDoJson(data,pid,level) {
      const result = []
      let temp = []
      for (let i = 0; i < data.length; i++) {
        if (data[i].pid === pid) {
          const obj =  data[i]
          obj.level = level
          temp = this.dataDoJson(data, data[i].id,level+1)
          if (temp.length > 0) {
            obj.children = temp
          }else{
            obj.children = []
          }
          result.push(obj)
        }
      }
      return result
    },
    addItem(val,type) {
      this.openAddOrUpload = true
      this.$nextTick(() => {
        this.$refs.addOrUpload.init(val,type)
      })
    },
    whatIclick(type, data) {
      return {
        type,
        data
      }
    },
    deleteItem(val) {
      const idarr = []
      if (val === 1) {
        this.multipleSelection.forEach(e => {
          idarr.push(e.id)
        })
      } else {
        idarr.push(val.id)
      }
      const ids = idarr.join()
      this.$confirm('此操作将删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http.httpPost('/cate/delCate', { ids: ids }).then(res=>{
            if (res.data.data) {
              this.$operateTip('已完成！', '已完成数据删除！', 'success')
              this.search()
            }else{
              this.$message.error(res.data.msg)
            }
          })
        })
        .catch(() => {
          this.$operateTip('已取消！', '已取消数据删除！', 'info')
        })
    },
    handleCommand(e) {
      if (e.type === 'update') {
        this.addItem(e.data,1)
      } else if (e.type === 'delete') {
        this.deleteItem(e.data)
      } else if (e.type === 'addNext') {
        this.addItem(e.data,0)
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.search()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.search()
    },
    // 列表多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style lang="less"></style>
